<template>
  <div class="orderData flex-col justify-center items-center">
    <div class="item" v-for="(item, index) in data" :key="`order${index}`">
      <div class="top items-center">
        <span class="date">{{ item.createTime | changeTime }}</span>
        <span class="status">{{ item.status | changeStatus }}</span>
      </div>
      <div class="content">
        <div class="order">订单编号：{{ item.orderNumber }}</div>
        <div class="info">
          <div class="left">
            <img :src="item.coverUrl" alt="" class="img" mode="aspectFit" />
          </div>
          <div class="right flex-col">
            <div class="title ellipsis_1">{{ item.goodsName }}</div>
            <!-- <div class="tag">芝麻信用：有机会免押</div> -->-
            <div class="team" v-if="item.specName">
              套餐：{{ item.specName }}
            </div>
            <div class="team">租期：{{ item.startEndTimeString }}</div>
            <div class="price">
              <span class="text">总租金：￥{{ item.allRentFee || 0 }}</span>
              <span class="num">x{{ item.num }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="action items-center justify-end">
        <span
          class="btn"
          v-if="[0, 1, 2, 3, 5].includes(item.status)"
          @tap="controlServer(item)"
          >联系客服</span
        >
        <!-- 待归还  -->
        <span
          class="btn btn2"
          v-if="[4, 5].includes(item.status)"
          @tap="goOrderList(item)"
          >归还</span
        >
        <!-- 待支付 -->
        <span class="btn btn2" v-if="item.status === 0" @tap="goOrderList(item)"
          >去支付</span
        >
        <!-- 租用中 待归还 -->
        <span
          class="btn btn2"
          v-if="[4, 5].includes(item.status) && item.type === 0"
          @tap="goAliapp(item)"
          >续租</span
        >

        <!-- 买断审核中 type:0普通状态 1结算订单状态 2买断审核中状态 -->
        <span
          class="btn btn2"
          v-if="[4, 5].includes(item.status) && item.type === 0"
          @tap="goAliapp(item)"
          >买断</span
        >
        <span
          class="btn btn2"
          v-if="[4].includes(item.status)"
          @tap="goOrderList(item)"
          >账单查询</span
        >
        <span
          class="btn btn2"
          v-if="
            [4, 5].includes(item.status) &&
            item.type === 2 &&
            item.settlementPrice === 0
          "
          @tap="goOrderList(item)"
          >买断审核中</span
        >
        <span
          class="btn btn2"
          v-if="
            [4, 5].includes(item.status) &&
            item.type === 2 &&
            item.settlementPrice !== 0
          "
          @tap="goOrderList(item)"
          >去支付</span
        >
        <span
          class="btn btn2"
          v-if="
            [4, 5].includes(item.status) &&
            item.type === 1 &&
            item.settlementPrice !== 0
          "
          @tap="goOrderList(item)"
          >去结算</span
        >
        <!-- 已完成 已取消 -->
        <span
          class="btn btn2"
          v-if="[6, 8].includes(item.status)"
          @tap="goAliapp(item)"
          >再次下单</span
        >
        <!-- 待评价 -->
        <span
          class="btn btn2"
          v-if="[7].includes(item.status)"
          @tap="goAssess(item)"
          >去评价</span
        >
        <!-- 人脸识别 -->
        <span
          class="btn btn2"
          v-if="item.status === 1 && item.IsShow"
          @tap="goOrderList(item)"
          >人脸识别</span
        >
      </div>
    </div>

    <NoData v-if="data.length === 0" />

    <!-- 客服弹窗 -->
    <!-- <ServerDialog v-model="showServer" :platformTelephone.sync="platformTelephone" :storeTelephone.sync="storeTelephone"/> -->

    <!-- 复制弹窗 -->
    <CopyDialog v-model="showCopy" :url.sync="url" />
  </div>
</template>

<script>
// import ServerDialog from '@components/serverDialog'
import { formatDate } from "@utils/util";
export default {
  // components: { ServerDialog },
  data() {
    return {
      showServer: false,
      storeTelephone: "",
      showCopy: false,
      url: "",
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    platformTelephone: {
      type: [String, Number],
      default: "",
    },
  },
  filters: {
    changeTime(times) {
      return formatDate(times);
    },
    changeStatus(status) {
      return {
        0: "待支付",
        1: "待审核",
        2: "待发货",
        3: "已发货",
        4: "租用中",
        5: "待归还",
        6: "已完成",
        7: "待评价",
        8: "已取消",
      }[status];
    },
  },
  methods: {
    controlServer({ storeTelphone }) {
      this.storeTelphone = storeTelphone;
      this.$nextTick(() => {
        this.showServer = true;
      });
    },
    goAliapp({ goodsId }) {
      const aliUrl = `alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D2021002110607982%26page%3Dpages%252Fgoods-details%252Findex%253Ftype%253D2%2526id%253D${goodsId}`;
      // const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`
      const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`;
      // this.$goCopy(url)
      this.url = url;
      this.showCopy = true;
      // this.$taro.setClipboardData({
      //   data: url
      // }).then(() => {
      //   this.$toast('复制成功，打开浏览器访问')
      // })
    },
    goOrderList() {
      // 去订单列表
      const aliUrl = `alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D2021002110607982%26page%3Dpages%252Forder%252Forder`;
      const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`;
      this.$goCopy(url);
      // this.$taro.setClipboardData({
      //   data: url
      // }).then(() => {
      //   this.$toast('复制成功，打开浏览器访问')
      // })
    },
    goAssess({ id }) {
      this.$goPage(`/pagesMy/addAssess/index?id=${id}`);
    },
  },
};
</script>
<style lang="scss">
.orderData {
  width: 100%;
  margin-top: 50px;
  .item {
    width: 356px;
    min-height: 224px;
    background: #ffffff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 5px;
    margin-bottom: 11px;
    &:first-child {
      margin-top: 12px;
    }
    .top {
      height: 42px;
      width: 100%;
      padding: 0 15px;
      border-bottom: 1px solid #e5e5e5;
      .date {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 19px;
        color: #000000;
      }
      .status {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 19px;
        color: #29b5ff;
        margin-left: auto;
      }
    }
    .content {
      overflow: auto;
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      height: 182px;
      .order {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 17px;
        color: #9d9d9d;
        margin-left: 11px;
        margin-top: 15px;
      }
      .info {
        margin-top: 20px;
        display: flex;
        .left {
          width: 117px;
          .img {
            width: 107px;
            height: 107px;
            margin-left: 10px;
          }
        }
        .right {
          width: 218px;
          padding: 0 10px;
          .title {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 23px;
            color: #232323;
          }
          .tag {
            padding: 0 5px;
            height: 20px;
            background: #ffffff;
            border: 1px solid #29b5ff;
            font-size: 10px;
            line-height: 20px;
            text-align: center;
            color: #29b5ff;
            margin-top: 6px;
            display: inline-block;
            width: fit-content;
          }
          .team {
            font-size: 12px;
            line-height: 17px;
            color: #9e9e9e;
            margin-top: 6px;
          }
          .price {
            display: flex;
            margin-top: 4px;
            .text,
            .num {
              font-size: 14px;
              line-height: 20px;
              color: #232323;
            }
            .num {
              margin-left: auto;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .action {
      height: 63px;
      padding: 0 10px;
      .btn {
        width: 76px;
        height: 38px;
        border: 1px solid #29b5ff;
        border-radius: 19px;
        margin-right: 5px;
        font-size: 13px;
        line-height: 40px;
        color: #29b5ff;
        text-align: center;
      }
      .btn2 {
        background: #29b5ff;
        color: #fff;
        margin-right: 5px;
      }
    }
  }
}
</style>
